<template>
    <!-- 设置中心 -->
      <el-tabs tab-position="left" style="height: 100%;">
        <el-tab-pane label="账号设置" class="pd-20">
          <div class="user-center">
            <div class="user-avatar">
              <el-upload ref="upload" class="upload-demo" :multiple="false" :action="getUrl" :show-file-list='false'
                :data='{type:1}' :headers="getToken" :on-success="handleAvatarSuccess" :auto-upload="false" :on-change="change"
                :before-upload="before" :http-request="request">
                <el-image :src="user.avatar" style="width:160px;border-radius: 8px;overflow: hidden;" class="m-20"></el-image>
                <el-button size="mini" class="replace-picture-button mab-30">更换头像</el-button>
              </el-upload>
              <el-dialog title="头像剪裁" :close-on-click-modal="false" :visible.sync="cropperDialogVisible" width="580px" :append-to-body="true" :show-close="true"
                  @closed='$refs.upload.clearFiles()'>
                  <Cropper :key="componentsKey" :src="cropperImg" :compress="compress" :aspectRatio="aspectRatio" ref="cropper">
                  </Cropper>
                  <template #footer>
                    <el-button @click="cropperDialogVisible=false;$refs.upload.clearFiles()">取 消</el-button>
                    <el-button type="primary" @click="cropperSave">确 定</el-button>
                  </template>
                </el-dialog>
                <div class="mt-20">
                  <el-button type="warning" @click="editInfo(1)">修改密码</el-button>
                </div>
                
            </div>
            <div class="user-info">
              <el-form :model="user" ref="userinfo" label-width="100px">
                <el-form-item label="登陆账号" prop="account">
                    {{user.account}}
                    <span class="fc-primary ml-10 cur-handle" @click="editInfo(0)">修改</span>
                </el-form-item>
                <el-form-item label="姓名" v-if="$store.state.globalConfig.sysInfo.runMode==1">
                    {{user.realname}}
                </el-form-item>
                <el-form-item label="昵称" v-else>
                    <el-input placeholder="请输入昵称" v-model="user.realname" maxlength="20" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="e-mail">
                    <el-input placeholder="请输入邮箱地址" v-model="user.email" maxlength="120" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="user.sex">
                      <el-radio :label="2" border>未知</el-radio>
                      <el-radio :label="1" border>男</el-radio>
                      <el-radio :label="0" border>女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="个性签名">
                  <el-input type="textarea" :rows="3" v-model="user.motto" maxlength="100" style="width:400px" show-word-limit></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <el-dialog
              :title="dialogTitle"
              :visible.sync="dialog"
              :modal="true"
              width="400px"
              append-to-body
            >
                <el-form label-width="100px">
                    <el-form-item label="当前账号">
                      {{user.account}}
                    </el-form-item>
                    <el-alert
                      class="mb-20"
                      title="验证账户的真实性，绑定后请使用新账户来重新登录！"
                      type="warning">
                    </el-alert>
                    <el-form-item label="验证码" v-if="user.is_auth">
                      <el-input
                          placeholder="请输入验证码"
                          maxlength="6"
                          style="width: 260px"
                          v-model="code">
                          <el-button slot="append" @click="sendCode(true)" :loading="loading">发送验证码</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="原密码" v-if="editPass &&  (!globalConfig.sysInfo.regauth || !user.is_auth)">
                      <el-input v-model="originalPassword"  show-password placeholder="请输入原来的密码"></el-input>
                    </el-form-item>
                    <el-form-item label="新账号" v-if="!editPass">
                      <el-input v-model="account" placeholder="请输入新的账号"></el-input>
                    </el-form-item>
                    <el-form-item label="新账号验证码" v-if="!editPass">
                      <el-input
                          placeholder="请输入新账号验证码"
                          maxlength="6"
                          style="width: 260px"
                          v-model="newCode">
                          <el-button slot="append" @click="sendCode(false)" :loading="loading">发送验证码</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="新密码" v-if="editPass">
                      <el-input v-model="password" show-password  placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="重复密码" v-if="editPass">
                      <el-input v-model="repass" show-password  placeholder="请输入重复输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="editPassword()">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
          <div class="mt-40" align="center">
            <el-button type="danger" @click="logout"  plain round style="width:150px;">退出登录</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="通用设置" class="pd-20">
          <el-form ref="form" :model="setting" label-width="100px">
            <el-form-item label="发送消息：">
              <el-radio-group v-model="setting.sendKey">
                <el-radio-button label="1">Enter</el-radio-button>
                <el-radio-button label="2">Ctrl + Enter</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="系统主题：">
              <el-radio-group v-model="setting.theme">
                <el-radio-button label="default"></el-radio-button>
                <el-radio-button label="blue"></el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div class="setting-switch">
            <el-switch v-model="setting.isVoice"> </el-switch
            >&emsp;开启新消息声音提醒
          </div>
          <div class="setting-switch">
            <el-switch v-model="setting.avatarCricle"> </el-switch
            >&emsp;开启聊天圆形头像（需要刷新）
          </div>
          <div class="setting-switch">
            <el-switch v-model="setting.hideMessageName"> </el-switch
            >&emsp;是否隐藏聊天窗口内的联系人名字
          </div>
          <div class="setting-switch">
            <el-switch v-model="setting.hideMessageTime"> </el-switch
            >&emsp;是否隐藏聊天窗口内的消息发送时间
          </div>
        </el-tab-pane>
        <el-tab-pane label="关于 IM" class="pd-20" v-if="parseInt(globalConfig.demon_mode)==1">
          <div class="about-logo">
            <el-avatar :src="$packageData.logo" :size="50"></el-avatar>
            <br /><br />
            <p>
              <span class="fc-primary"> {{ $packageData.name }} </span>for {{ $packageData.version }}
            </p>
          </div>
          <div class="setting-version">
            <b> 已经支持功能：</b>
            <p v-for="item in $packageData.funcList" :key="item.icon"><i :class="item.icon"></i> {{ item.text }}</p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="开源" class="pd-20" v-if="parseInt(globalConfig.demon_mode)==1">
          <div  class="about-logo">
            <el-avatar :src="$packageData.logo" :size="50"></el-avatar>
            <br /><br />
            <p>
              <span class="fc-primary"> {{ $packageData.name }} </span>for {{ $packageData.version }}
            </p>
          </div>
          <!-- <div class="setting-version">
            <b> 即将支持功能：</b>
            <p>1、解散群聊、群公告设置、群功能设置</p>
          </div> -->
          <div class="setting-version">
            <p>
              前端地址：<a
                class="fc-primary"
                :href="$packageData.frontUrl"
                target="_blank">[链接] im-chat-front</a>
            </p>
            <p>
              后端地址：<a
                class="fc-primary"
                :href="$packageData.backstageUrl"
                target="_blank">[链接] im-instant-chat</a>
            </p>
          </div>
          <div class="setting-version" style="color: #a6a6a6">
            <p>前端技术栈：vue+Lemon-IMUI+element-UI</p>
            <p>后端技术栈：thinkphp6+workerman</p>
          </div>
          <div class="setting-version">
            <p>
              QQ交流群：
              <a
                class="fc-primary"
                :href="$packageData.qqGroupUrl"
                target="_blank">336921267</a>
            </p>
          </div>
        </el-tab-pane>
      </el-tabs>
</template>
<script>
import Lockr from "lockr";
let user = Lockr.get("UserInfo");
import { mapState } from "vuex";
import Cropper from "@/components/cropper/index.vue";
import { Dialog } from "element-ui";
export default {
    name: "manageGroup",
    props: {
    },
    components: {
        Cropper,
    },
    data() {
        return {
          componentsKey: 1,
          maxSize: 5,
          compress: 1,
          aspectRatio: 1 / 1,
          cropperDialogVisible: false,
          cropper: true,
          cropperImg: '',
          tempImg: '',
          dialogVisible: false,
          dialog: false,
          dialogTitle: '修改密码',
          editPass:1,
          originalPassword:'',
          account: '',
          password: '',
          repass: '',
          code: '',
          newCode:'',
          loading: false,
          
        };
    },
    computed: {
        ...mapState({
            setting: (state) => state.setting,
            user: (state) => state.userInfo,
            globalConfig: state => state.globalConfig
        }),
        getUrl () {
          return window.BASE_URL + '/common/upload/uploadAvatar'
        },
        getToken () {
          const authKey = Lockr.get('authToken');
          return { Authorization: authKey }
        },
    },
    watch: {
        // 监听设置发送变化需要进行设置更改
        setting: {
            handler(newValue, oldValue) {
                this.$api.imApi.settingAPI(newValue);
                let user = Lockr.get("UserInfo");
                user.setting = newValue;
                Lockr.set("UserInfo", user);
            },
            deep: true,
        },
        editPass(val){
          if(val==1){
            this.dialogTitle = '修改密码';
          }else{
            this.dialogTitle = '修改账号';
          }
        }
    },
    methods: {
        logout() {
            this.$confirm("确定退出登录吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$store.dispatch("LogOut").then(() => {
                        this.$router.push("/login");
                    })
                })
                .catch(() => {});
        },
        submitForm(){
          if(this.user.realname == ''){
            this.$message.error('请输入昵称')
            return false
          }
          let params={
            realname:this.user.realname,
            email:this.user.email,
            sex:this.user.sex,
            motto:this.user.motto
          }
          this.$api.imApi.updateUserInfo(params).then(res=>{
            if(res.code == 0){
              this.$message.success('修改成功');
              let data=JSON.parse(JSON.stringify(this.user))
              this.$store.commit("SET_USERINFO", data)
            }
          })

        },
        // 是否为图片
        isImg (fileUrl) {
          var strRegex = "(.jpg|.png|.gif|.jpeg)$";
          var re = new RegExp(strRegex);
          if (re.test(fileUrl.toLowerCase())) {
            this.fileIsImg = true;
          } else {
            this.fileIsImg = false;
          }
        },
        // 选择图片后进行操作
        change (file) {
          if (this.cropper && file.status == 'ready') {
            this.isImg(file.name)
            if (!this.fileIsImg) {
              this.$message.error('选择的文件非图像类文件')
              return false
            }
            this.componentsKey++;
            this.cropperDialogVisible = true
            this.cropperImg = URL.createObjectURL(file.raw)
          }
        },
        // 选择图片的时候进行验证
        before (file) {
          file = this.cropper ? this.cropperUploadFile : file
          const maxSize = file.size / 1024 / 1024 < this.maxSize;
          if (!maxSize) {
            this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
            return false;
          }
          this.isImg(file.name)
          this.tempImg = URL.createObjectURL(file);
        },
        // 上传图图片
        request (param) {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
          });
          const data = new FormData();
          var file = this.cropper ? this.cropperUploadFile : param.file
          data.append("file", file);
          data.append("type", 1);
          this.$api.commonApi.uploadAvatar(data).then(res => {
            this.cropperImg = '';
            loading.close();
            this.handleAvatarSuccess(res)
            param.onSuccess(res)
          }).catch(err => {
            loading.close();
            param.onError(err)
          })
        },
        // 保存裁剪图片并上传
        cropperSave () {
          var uploadFile = this.$refs.upload.uploadFiles[0].raw
          this.$refs.cropper.getCropFile(file => {
            this.cropperUploadFile = file
            this.$refs.upload.submit()
            this.cropperDialogVisible = false
          }, uploadFile.name, uploadFile.type)

        },
        handleAvatarSuccess (res, file) {
          let data = this.$store.state.userInfo
          this.$set(data, 'avatar', res.data)
          this.$store.commit("SET_USERINFO", data)
        },
        editInfo(edit){
          this.dialog=true;
          this.editPass=edit;
        },
        // 修改密码
        editPassword(){
          if(this.code=='' && this.user.is_auth){
              this.$message({
                message: '请输入验证码',
                type: 'warning'
              });
              return false;
          }
          if(this.editPass){
            if(this.password=='' || this.password.length<6 || this.password.length>16){
                this.$message({
                  message: '请输入6-16个字符串的密码',
                  type: 'warning'
                });
                return false;
            }
            if(this.password!=this.repass){
                this.$message({
                  message: '两次密码不一致',
                  type: 'warning'
                });
                return false;
            }
            if(!this.originalPassword){
                this.$message({
                  message: '请输入原密码',
                  type: 'warning'
                });
                return false;
            }
            let params = {
                password:this.password,
                code:this.code,
                originalPassword:this.originalPassword
            }
            this.$api.imApi.editPassword(params).then(res=>{
                if(res.code==0){
                  this.dialog = false;
                  this.password = '';
                  this.repass = '';
                  this.$message({
                      message: res.msg,
                      type: 'success'
                  });
                }
            })
          }else{
            if(this.account==''){
                this.$message({
                  message: '请输入账号',
                  type: 'warning'
                });
                return false;
            }
            if(this.newCode==''){
                this.$message({
                  message: '请输入新账户验证码',
                  type: 'warning'
                });
                return false;
            }
            let params = {
                account:this.account,
                code:this.code,
                newCode:this.newCode
            }
            this.$api.imApi.editAccount(params).then(res=>{
                if(res.code==0){
                  this.dialog = false;
                  this.account = '';
                  this.code = '';
                  this.newCode = '';
                  this.$message({
                      message: res.msg,
                      type: 'success'
                  });
                  this.$store.dispatch("LogOut").then(() => {
                        this.$router.push("/login");
                    })
                }
            })
          }
          
        },
        sendCode(e){
          let account=e ? this.user.account : this.account;
          let type = this.editPass ? 3 : 4;
          if(account==''){
            this.$message({
              message: '请输入新的账号',
              type: 'warning'
            });
            return false;
          }
          this.loading = true;
          this.$store.dispatch('sendCode',{type:type,account:account}).then(res=>{
            this.$message.success('发送成功');
            this.loading=false;
          }).catch(()=>{
            this.loading=false;
          })
        }
    },
    
};
</script>
<style lang="scss" scoped>
.user-center{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    .user-avatar{
      width:240px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
    }
    .user-info{
      flex:1;
    }
}
.setting-switch {
  margin: 0 30px 20px;
}

.setting-version {
  margin: 10px 20px;
  line-height: 2;
}

.fc-primary {
  color: #409eff;
}

.about-logo {
  text-align: center;
  width:200px;
}
::v-deep .el-tabs__nav{
  margin-top:20px;
  width:120px;
}
</style>